<!-- 底部购物栏 -->
<template>
  <view class="bottom-car-box">
    <view class="bottom-car">
      <!-- <view class="collect">
        <view>
          <van-icon size="24" name="like-o" />
        </view>
        <view class="f24">收藏</view>
      </view> -->
      <!-- <view class="car" @click="goCar">
        <view>
          <van-icon size="24" name="shopping-cart-o" />
        </view>
        <view class="f24">购物车</view>
      </view> -->
      <u-button class="custom-style btn2" @click="buyNow">立即购买</u-button>
      <!-- <view class="buy">
        <u-button class="custom-style btn1" @click="addToCart"
          >加入购物车</u-button
        >

        <u-button class="custom-style btn2" @click="buyNow">立即下单</u-button>
      </view> -->
    </view>
    <!-- 商品弹窗 -->
    <u-popup v-model="show" mode="bottom" border-radius="14" height="85%">
      <view class="goodsPop">
        <!-- 商品价格和数量 -->

        <view class="goodstopBox">
          <view class="goodstop">
            <image
              :src="buyParamsVal.image ? buyParamsVal.image : productObj.image"
              mode="scaleToFill"
              style="width: 132rpx; height: 132rpx; border-radius: 20rpx"
            />
            <view class="priceBox">
              <view class="price">
                <text class="limitNum" v-if="buyParamsVal.limitNum"
                  >限{{ buyParamsVal.limitNum }}件</text
                >
                <text style="font-size: 28rpx; font-weight: 700">￥</text>
                <text class="fw700"
                  >{{ buyParamsVal.price }}
                  <text
                    style="font-size: 28rpx"
                    v-if="productObj.availableTicket"
                    >+
                    <image
                      style="width: 30rpx; height: 30rpx"
                      src="@/static/xfl/quan1.png"
                      mode="scaleToFill"
                    />
                    {{ showScoreMoney }}</text
                  >
                </text>
              </view>
              <view class="number">{{ buyParamsVal.lowestNum }}件起购</view>
            </view>
            <view style="margin-top: 50rpx; margin-left: 20rpx">
              <van-stepper
                input-width="50"
                button-size="32"
                v-model="stepperValue"
                :min="minBuy"
                :max="maxBuy"
            /></view>
          </view>
          <!-- 收货地址 -->
          <view class="address" @click="toAddressList">
            <view class="fw700">收货地址</view>
            <u-cell-item :title="address.addressStr"></u-cell-item>

            <u-cell-item
              style="padding: 5rpx 30rpx"
              title="运费"
              :arrow="false"
            >
              <text v-if="freightLoading">计算中...</text>
              <text v-else>￥{{ buyParamsVal.freight || '0.00' }}</text>
            </u-cell-item>
            <view class="errorText">{{ btnErrorText }}</view>
          </view>
        </view>
        <!-- 规格 -->

        <scroll-view class="sizeBox" scroll-y="true">
          <view
            class="size"
            v-for="(spec, specIndex) in specsList"
            :key="spec.specId + '_' + specIndex"
          >
            <text class="fw700">{{ spec.name }}</text>
            <view class="specsBox">
              <view
                v-for="(item, itemIndex) in spec.values"
                class="specs"
                :class="{
                  active: item.checked,
                  soldout: isCombinationAvailable(spec.specId, item.valId)
                }"
                :key="item.valId + '_' + itemIndex"
                @click.stop="
                  selectSpec(
                    specIndex,
                    itemIndex,
                    isCombinationAvailable(spec.specId, item.valId)
                  )
                "
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 确认购买 -->
        <view class="btnBuy">
          <u-button :disabled="btnDisable" type="primary" @click="confirm">
            {{ btnParams.btnText }}</u-button
          >
        </view>
      </view>
    </u-popup>
    <!-- 弹框去地址页面 showAddressModal-->
    <view>
      <u-modal
        v-model="showAddressModal"
        content="请添加默认地址购买商品~"
        @confirm="toAddressList"
      ></u-modal>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, watch, reactive, ref, h } from 'vue'
// 图片
import erro from '../static/erro.png'
//工具
import { moneyUtils } from '@/utils/money'
//api
import { productApi, moneyApi, userApi, baseApi } from '@/api'
import { storeToRefs } from 'pinia'
//store
import { useUserStore } from '@/store'
import { userGylCarStore } from '@/store'

// interface
interface SpecValue {
  valId: number | string
  name: string
  checked: boolean
}

interface SpecItem {
  specId: number | string
  name: string
  values: SpecValue[]
}

interface SkuSpec {
  specId: number | string
  valId: number | string
}

interface ShopProductSku {
  lowestNum: number
  limitNum: number
  specialType: number
  count: number
  shopProductSkuId: number | string
  specs: SkuSpec[]
  image: string
  money: number
  highestScoreMoney: number
}

// 初始数据
defineExpose({
  openPopup
})
const emit = defineEmits(['chooseOptional'])
const props = defineProps({
  productObj: {
    type: Object,
    default: {
      image: erro,
      price: 9999
    }
  },
  addressData: {
    type: Object,
    default: {
      addressStr: '暂无收货地址，请先添加后下单'
    }
  },
  shopProductSkus: {
    type: Array,
    default: []
  },
  specs: {
    type: Array,
    default: []
  },
  goodsDetaile: {
    type: Array,
    default: [] as any
  }
})

//初始数据
const isApp = ref()

const storeUser = useUserStore()
const gylStore = userGylCarStore()
const { hasLogin, userInfo } = storeToRefs(storeUser)
const address = ref<any>({})
const specsList = ref<any>([])
const productObj = computed(() => props.productObj)
const buyParamsVal = ref<any>({
  lowestNum: 1,
  limitNum: 0,
  specialType: 0,
  price: props.productObj.price,
  str: ''
  // image: erro
})
const businessAttr = ref('')
const isSoldOut = ref(false)
const shopProductSkusList = computed(() => props.shopProductSkus)
const show = ref(false)
// const buyParamsVal = ref({}) //选中商品规格
const stepperValue = ref(1) //选购数量
const discount = ref(1) //当前用户可享受的折扣
const minBuy = ref(1) //起购
const maxBuy = ref(999) //限购
// 将 activeSpecIndex 改为数组，用于存储每个规格的选中项索引
const activeSpec = ref<number[]>([]) //选中的
const btnParams = reactive({
  btnText: '立即下单',
  btnType: 1
})
const btnDisable = ref(false)
const btnErrorText = ref('')
const freightLoading = ref(false)
const btnLoading = ref(false)
const showAddressModal = ref(false) //打开添加地址弹框
// 打开弹窗
function openPopup() {
  show.value = true
}

// 立即下单
const buyNow = () => {
  show.value = true
  btnParams.btnText = '立即下单'
  btnParams.btnType = 1
}

// 加入购物车
const addToCart = () => {
  show.value = true
  btnParams.btnText = '确定'
  btnParams.btnType = 2
}

// 关闭弹窗
const closePopup = () => {
  show.value = false
}

// 确认
const confirm = async () => {
  if (buyParamsVal.value.specs.length <= 0)
    return uni.showToast({
      title: '请选择规格！',
      icon: 'error'
    })

  if (btnDisable.value || btnLoading.value) {
    return
  }

  try {
    btnLoading.value = true

    // 可以在这里添加其他确认前的逻辑

    show.value = false
    if (btnParams.btnType === 1) {
      // 立即下单
      const obj = {
        shopProductSku: { ...buyParamsVal.value },
        shopProductSkuId: buyParamsVal.value.shopProductSkuId,
        count: stepperValue.value,
        actualDeductible: buyParamsVal.value.highestScoreMoney,
        availableTicket: buyParamsVal.value.highestScoreMoney,
        businessAttr: buyParamsVal.value.str,
        otherCheckStr: buyParamsVal.value.str
      }
      const chooseList = []
      chooseList.push(obj)
      gylStore.setChooseList(chooseList)
      gylStore.setAddressId(address.value.id)
      if (isApp.value) {
        uni.navigateTo({
          url: `/packageG/pages/supplyChainOrder/orderDetail?orderStatus=10&orderType=1&from=${isApp.value}`
        })
      } else {
        uni.navigateTo({
          url: `/packageG/pages/supplyChainOrder/orderDetail?orderStatus=10&orderType=1`
        })
      }
    } else {
      // 添加购物车
      const { data, code } = await productApi.productCartAdd({
        userId: userInfo.value.id,
        shopId: uni.getStorageSync('gylShopId'),
        shopProductSkuId: buyParamsVal.value.shopProductSkuId,
        count: stepperValue.value,
        money: buyParamsVal.value.price,
        businessAttr: buyParamsVal.value.str
      })

      if (code == 200) {
        uni.showToast({
          title: '添加购物车成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '添加购物车失败',
          icon: 'error'
        })
      }
    }
  } catch (error: any) {
    uni.showToast({
      title: '操作失败，请重试:' + error.msg,
      icon: 'error'
    })
  } finally {
    btnLoading.value = false
  }
}

//#region ***************** 地址/运费处理 *************************/
//查询用户默认地址
const getDefaultAddress = async () => {
  const { data, code } = await userApi.getAddressList({
    type: 5,
    is_default_address: 1,
    detail: true
  })
  if (code == 200) {
    if (data.records.length > 0) {
      const isDefaultAddress = data.records.some((item: any) => {
        return item.defaultAddress
      })
      let str
      if (isDefaultAddress) {
        const defaultAddressList = data.records.filter((item: any) => {
          return item.defaultAddress
        })
        str = defaultAddressList[0].address
      } else {
        str = data.records[0].address
      }

      const addressStr =
        str.provinceName +
        str.cityName +
        str.districtName +
        str.street +
        str.other
      address.value = { addressStr, ...str }
      gylStore.setAddressId(str.id)
      showAddressModal.value = false

      debounceGetFreight(buyParamsVal.value)
    } else {
      address.value = { addressStr: '', id: 0 }
      setTimeout(() => {
        showAddressModal.value = true
      }, 500)
    }
    // uni.showToast({
    //   title: '请添加默认地址',
    //   icon: 'none'
    // })
  }
}

// 添加地址
const toAddressList = () => {
  uni.navigateTo({
    url: '/packageB/pages/addressList/index?type=setAddress&isGYL=5',
    success: () => {
      uni.$once('/pages/productCheckout/index', (data: { address: {} }) => {
        setAddress(data)
      })
    }
  })
}

const setAddress = (data: { address: {} }) => {
  const str: any = data.address
  const addressStr =
    str.provinceName + str.cityName + str.districtName + str.street + str.other
  address.value = { ...data.address, addressStr }

  debounceGetFreight(buyParamsVal.value)
  // orderData.value.addressId = data.address.id
  // getOrderMoney()
}

// 运费
const getFreight = async (item: any) => {
  // 参数验证
  if (!item || !item.shopProductSkuId) {
    console.warn('Invalid item or missing shopProductSkuId')
    buyParamsVal.value.freight = 0
    return
  }

  // 如果没有地址，不计算运费
  if (!address.value || !address.value.id) {
    buyParamsVal.value.freight = 0
    return
  }

  try {
    // 设置加载状态
    freightLoading.value = true

    // 防抖处理 - 清除之前的请求
    if (freightTimer) {
      clearTimeout(freightTimer)
    }

    // 发送请求
    const { data, code } = await productApi.getDhFreight({
      address: address.value,
      skus: [
        {
          count: stepperValue.value,
          shopProductSkuId: item.shopProductSkuId
        }
      ]
    })

    if (code == 200) {
      buyParamsVal.value.freight = data
      btnDisable.value = false
      btnErrorText.value = ''
    } else {
      console.warn('获取运费失败:', code)
      buyParamsVal.value.freight = 999 // 默认运费为0
      btnDisable.value = true
    }
  } catch (error: any) {
    console.error('获取运费接口异常:', error)
    buyParamsVal.value.freight = 999 // 默认运费为0
    btnDisable.value = true
    // 可选：显示友好提示
    uni.showToast({
      title: `运费计算失败---${error.msg}。`,
      icon: 'none',
      duration: 3000
    })
    btnErrorText.value = `运费计算失败---${error.msg}。`
  } finally {
    freightLoading.value = false
  }
}

// 防抖定时器
let freightTimer: any = null

// 带防抖的运费计算
const debounceGetFreight = (item: any) => {
  if (freightTimer) {
    clearTimeout(freightTimer)
  }

  freightTimer = setTimeout(() => {
    getFreight(item)
  }, 500)
}

watch(
  () => props.addressData,
  (newVal) => {
    if (newVal) {
      address.value = newVal
    } else {
      address.value.addressStr = '暂无收货地址，请先添加后下单'
    }
  }
)

// 监听 stepperValue 变化，重新计算运费
watch(
  () => stepperValue.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal && activeSpec.value.length > 0) {
      // 重新查找匹配的 SKU
      const matchedSku: any = shopProductSkusList.value.find((sku: any) => {
        if (sku.specs.length !== activeSpec.value.length) return false
        return sku.specs.every((skuSpec: SkuSpec) => {
          return activeSpec.value.some(
            (selectedSpec: any) =>
              selectedSpec.specId === skuSpec.specId &&
              selectedSpec.valId === skuSpec.valId
          )
        })
      })

      if (matchedSku) {
        debounceGetFreight(matchedSku)
      }
    }
  }
)

//#endregion

//#region ***************** 金额处理 *************************/
// 展示抵扣券
const showScoreMoney = computed(() => {
  return buyParamsVal.value.highestScoreMoney || 0
})
const selectPrice = (item: any) => {
  // 用户自身拥有的优惠券

  // 参数验证
  if (!item || typeof item !== 'object') {
    console.warn('Invalid item parameter for selectPrice')
    buyParamsVal.value.price = moneyUtils.formatPrice(
      productObj.value?.price || 0
    )
    return
  }

  // 提取并验证数值
  const money = Number(item.money)
  const scoreMoney = Number(item.scoreMoney || 0)
  // 修复：将highestScoreMoney乘以商品数量
  const highestScoreMoney = Number(
    item.highestScoreMoney * stepperValue.value || 0
  )

  // 验证基础价格
  if (isNaN(money) || money < 0) {
    console.warn('Invalid money value:', item.money)
    buyParamsVal.value.price = moneyUtils.formatPrice(
      productObj.value?.price || 0
    )
    return
  }

  // 验证积分抵扣值
  if (isNaN(scoreMoney) || scoreMoney < 0) {
    console.warn('Invalid scoreMoney value:', item.scoreMoney)
    buyParamsVal.value.price = moneyUtils.formatPrice(money)
    return
  }

  if (isNaN(highestScoreMoney) || highestScoreMoney < 0) {
    console.warn('Invalid highestScoreMoney value:', item.highestScoreMoney)
    buyParamsVal.value.price = moneyUtils.formatPrice(money)
    return
  }

  // 计算可用的折扣金额
  let availableTicket = 0
  // 只有当用户有积分抵扣金额时才计算可用抵扣
  if (scoreMoney > 0 && highestScoreMoney > 0) {
    availableTicket = Math.min(scoreMoney, highestScoreMoney)
  } else if (scoreMoney > 0) {
    // 用户有积分但商品没有设置最高抵扣，使用用户积分
    availableTicket = scoreMoney
  }

  // 确保折扣金额不超过商品价格
  availableTicket = Math.min(availableTicket, money * stepperValue.value)

  gylStore.setDeductible(availableTicket)

  // 格式化价格并赋值（单价显示，但实际计算按总价）
  buyParamsVal.value.price = moneyUtils.formatPrice(
    money - (availableTicket / stepperValue.value || 0)
  )

  discount.value = availableTicket

  buyParamsVal.value.highestScoreMoney =
    gylStore.discount > item.highestScoreMoney
      ? item.highestScoreMoney
      : gylStore.discount
}

watch(
  () => stepperValue.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal && activeSpec.value.length > 0) {
      // 重新查找匹配的 SKU
      const matchedSku: any = shopProductSkusList.value.find((sku: any) => {
        if (sku.specs.length !== activeSpec.value.length) return false
        return sku.specs.every((skuSpec: SkuSpec) => {
          return activeSpec.value.some(
            (selectedSpec: any) =>
              selectedSpec.specId === skuSpec.specId &&
              selectedSpec.valId === skuSpec.valId
          )
        })
      })

      if (matchedSku) {
        // 重新计算价格
        selectPrice(matchedSku)
        // 重新计算运费
        debounceGetFreight(matchedSku)
      }
    }
  }
)

//#endregion

//#region ***************** 规格处理 *************************/
// 选择规格 - 为每个规格单独处理点击事件
const selectSpec = (
  specIndex: number,
  itemIndex: number,
  disabled: boolean
) => {
  if (disabled)
    return uni.showToast({
      title: '该规格已售罄！',
      icon: 'error'
    })

  const currentItem = specsList.value[specIndex].values[itemIndex]

  // 如果当前项已选中，则取消选中
  if (currentItem.checked) {
    currentItem.checked = false
  } else {
    // 先将该规格维度的所有项 checked 设为 false
    specsList.value[specIndex].values.forEach((item: SpecValue) => {
      item.checked = false
    })

    // 将选中的项 checked 设为 true
    specsList.value[specIndex].values[itemIndex].checked = true
  }

  const selsetParams = {
    list: [],
    str: ''
  }
  selsetParams.list = getSelectSpece()
  selsetParams.str = getSelectSpece()
    .map((item: any) => item.name)
    .join('/')
  activeSpec.value = selsetParams.list
  businessAttr.value = selsetParams.str
}

const getSelectSpece = () => {
  const selectArr: any = []
  specsList.value.forEach((item: any) => {
    item.values.forEach((element: any) => {
      if (element.checked) {
        selectArr.push({
          specId: item.specId,
          valId: element.valId,
          name: element.name
        })
      }
    })
  })

  return selectArr
}

// 修改 initDefaultSelection 方法
const initDefaultSelection = () => {
  // 初始化默认选中第一个规格的第一个值
  if (specsList.value.length > 0 && specsList.value[0].values.length > 0) {
    specsList.value[0].values[0].checked = true
  }

  const selsetParams = {
    list: [],
    str: ''
  }
  selsetParams.list = getSelectSpece()
  selsetParams.str = getSelectSpece()
    .map((item: any) => item.name)
    .join('/')
  activeSpec.value = selsetParams.list
  businessAttr.value = selsetParams.str
  emit('chooseOptional', selsetParams)

  // 新增：触发价格和运费计算
  triggerPriceAndFreightCalculation()
}

// 新增方法：触发价格和运费计算
const triggerPriceAndFreightCalculation = () => {
  // 查找匹配的 SKU 项
  if (activeSpec.value.length > 0 && shopProductSkusList.value) {
    const matchedSku: any = shopProductSkusList.value.find((sku: any) => {
      // 检查 SKU 的规格是否与选中的规格完全匹配
      if (sku.specs.length !== activeSpec.value.length) return false

      return sku.specs.every((skuSpec: SkuSpec) => {
        return activeSpec.value.some(
          (selectedSpec: any) =>
            selectedSpec.specId === skuSpec.specId &&
            selectedSpec.valId === skuSpec.valId
        )
      })
    })

    if (matchedSku) {
      console.log('默认选中 SKU:', matchedSku, businessAttr.value)
      // 处理匹配到的 SKU
      buyParamsVal.value = { ...matchedSku, str: businessAttr.value }
      selectPrice(matchedSku)
      minBuy.value = matchedSku.lowestNum
      maxBuy.value = matchedSku.limitNum == 0 ? 999 : matchedSku.limitNum
      isSoldOut.value = false
      // 计算运费
      debounceGetFreight(matchedSku)
    } else {
      buyParamsVal.value = {
        lowestNum: 1,
        limitNum: 0,
        specialType: 0,
        price: productObj.value.price,
        specs: [],
        str: '',
        highestScoreMoney: productObj.value.availableTicket
      }
      minBuy.value = 1
      maxBuy.value = 999
      isSoldOut.value = true
    }
  }
}

// 检查组合是否存在于 shopSKU 中
const isCombinationAvailable = (specId: any, valId: any) => {
  // 获取当前已选中的规格
  const selectedSpecs = getSelectSpece()

  // 构造一个新的组合，包含当前已选中的规格和正在检查的规格
  const checkCombination = [
    ...selectedSpecs.filter((spec: any) => spec.specId !== specId),
    { specId, valId }
  ]

  // 检查这个组合是否在 shopProductSkusList 中存在
  const isAvailable = shopProductSkusList.value.some((sku: any) => {
    return checkCombination.every((checkSpec: any) => {
      return sku.specs.some(
        (skuSpec: any) =>
          skuSpec.specId === checkSpec.specId &&
          skuSpec.valId === checkSpec.valId
      )
    })
  })

  // 返回相反值，因为这个函数用于判断是否售罄（不可用）

  return !isAvailable
}

// 初始化 activeSpecIndices 数组
watch(
  () => props.specs,
  (newSpecs) => {
    if (newSpecs && newSpecs.length > 0) {
      // 初始化 specsList
      specsList.value = JSON.parse(JSON.stringify(newSpecs))
      specsList.value[0].values[0].checked = true
      initDefaultSelection()
    }
  },
  { immediate: true, deep: true }
)

//监听  activeSpec
watch(
  () => activeSpec.value,
  (newVal) => {
    if (newVal && newVal.length > 0 && shopProductSkusList.value) {
      // 查找匹配的 SKU 项
      const matchedSku: any = shopProductSkusList.value.find((sku: any) => {
        // 检查 SKU 的规格是否与选中的规格完全匹配
        if (sku.specs.length !== newVal.length) return false

        return sku.specs.every((skuSpec: SkuSpec) => {
          return newVal.some(
            (selectedSpec: any) =>
              selectedSpec.specId === skuSpec.specId &&
              selectedSpec.valId === skuSpec.valId
          )
        })
      })

      if (matchedSku) {
        console.log('匹配到的 SKU:', matchedSku, businessAttr.value)
        // 在这里处理匹配到的 SKU，例如更新价格、图片等
        // 可以通过 emit 传递给父组件或更新内部状态
        buyParamsVal.value = { ...matchedSku, str: businessAttr.value }
        // 更新最高抵扣金额
        buyParamsVal.value.highestScoreMoney =
          gylStore.discount > matchedSku.highestScoreMoney
            ? matchedSku.highestScoreMoney
            : gylStore.discount
        // 选择规格的价格
        selectPrice(matchedSku)
        minBuy.value = matchedSku.lowestNum
        maxBuy.value = matchedSku.limitNum == 0 ? 999 : matchedSku.limitNum
        isSoldOut.value = false
        debounceGetFreight(matchedSku)
      } else {
        buyParamsVal.value = {
          lowestNum: 1,
          limitNum: 0,
          specialType: 0,
          price: productObj.value.price,
          specs: [],
          str: '',
          highestScoreMoney: productObj.value.highestScoreMoney
          // image: erro
        }
        minBuy.value = 1
        maxBuy.value = 999
        isSoldOut.value = true
      }
    }
  }
)

//#endregion

// 购物车
const goCar = () => {
  uni.navigateTo({
    url: '/packageG/pages/car/index'
  })
}

onLoad((option: any) => {
  console.log('bootomCar:', option)

  if (option?.from) {
    isApp.value = option.from
  }

  // 查询用户默认地址
  getDefaultAddress()
})
</script>

<style lang="scss" scoped>
.bottom-car-box {
}

.bottom-car {
  width: 100%;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  // background-color: #fff;

  .collect,
  .car {
    text-align: center;
  }

  .buy {
    display: flex;

    .btn1 {
      background: #fff2ef;
      color: #fd7751;
    }

    .btn2 {
      width: 100%;
      margin-right: -10rpx;
      color: #fff;
      background: #e9313b;
    }
  }
}

.goodsPop {
  height: 100%;
  padding: 30rpx;
  .goodstopBox {
    // padding: 20rpx;
    // border: 10rpx solid #ff6c18;
    // border-radius: 10rpx;
    // margin-bottom: 20rpx;
  }
  .goodstop {
    display: flex;
    .priceBox {
      margin-left: 20rpx;
      color: #9a9a9a;
      .price {
        margin-bottom: 20rpx;
        font-size: 38rpx;
        color: #da1b20;
      }
    }
    .limitNum {
      font-size: 32rpx;
      font-weight: 700;
      color: #df4341;
    }
  }

  .address {
    margin: 20rpx 0;
  }

  .sizeBox {
    height: 600rpx;
    margin-bottom: 20rpx;
  }
  .size {
    // height: 200rpx;
    // background-color: green;

    .specsBox {
      display: flex;
      flex-wrap: wrap;
      .specs {
        padding: 20rpx;
        margin: 20rpx;
        border: 2rpx solid #f4f6f7;
        border-radius: 15rpx;
        background-color: #f4f6f7;
        &.soldout {
          color: #ccc;
          background-color: #f5f5f5;
          border: 2rpx dashed #ddd;

          .soldout-tag {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #ccc;
            color: white;
            font-size: 20rpx;
            padding: 2rpx 8rpx;
            border-radius: 0 15rpx 0 8rpx;
          }
        }

        &.active {
          font-weight: 700;
          color: #e47d57;
          background-color: #fff2f0 !important;
          border: 2rpx solid rgb(237, 158, 136) !important;
        }

        &.soldout.active {
          color: #ccc;
          background-color: #f5f5f5 !important;
          border: 2rpx dashed #ddd !important;
        }
      }
    }
  }

  .numBox {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
    .minor {
      font-size: 24rpx;
      color: #c1c0c3;
    }
  }

  .btnBuy {
    width: 100%;
    margin: 40rpx 0;
  }
}

.f24 {
  font-size: 24rpx;
}
.fw700 {
  font-weight: 700;
}
.custom-style {
  width: 100%;
  margin-right: 20rpx;
  color: #fff;
  background-color: #e9313b;
  font-size: 28rpx !important;
}
.active {
  font-weight: 700;
  color: #e47d57;
  background-color: #fff2f0 !important;
  border: 2rpx solid rgb(237, 158, 136) !important;
}
.errorText {
  color: red;
  margin: 10rpx 0;
}
</style>
